<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户社交账号绑定</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .m-title {
            margin-top: 30px;
        }

    </style>
</head>
<body>
    <div class="container">
        <h3 class="text-center m-title">用户社交账号</h3>

        <div class="row">
            <div class="col-6">
                <div class="text-center">
                    <p>QQ</p>
                    <p id="qqStatus">未绑定</p>
                    <a id="qqBindBtn" class="btn btn-primary binding" data-type="qq" href="javascript:void(0)">绑定</a>
                </div>
            </div>
            <div class="col-6">
                <div class="text-center">
                    <p>QQ</p>
                    <p id="weixinStatus">未绑定</p>
                    <a id="weixinBindBtn" class="btn btn-success binding" data-type="weixin" href="javascript:void(0)">绑定</a>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            var qqStatus = $("#qqStatus");
            var qqBindBtn = $("#qqBindBtn");

            var weixinStatus = $("#weixinStatus");
            var weixinBindBtn = $("#weixinBindBtn");
            $.get("/connect",function (res) {
                console.log(res);
                if(res['qq/callback']) {
                    qqStatus.html("已绑定");
                    qqBindBtn.html("解除绑定");
                    qqBindBtn.data("binded",true);
                } else {
                    qqStatus.html("未绑定");
                    qqBindBtn.html("绑定");
                    qqBindBtn.data("binded",false);
                }

                if(res['weixin']) {
                    weixinStatus.html("已绑定");
                    weixinBindBtn.html("解除绑定");
                    weixinBindBtn.data("binded",true);
                } else {
                    weixinStatus.html("未绑定");
                    weixinBindBtn.html("绑定");
                    weixinBindBtn.data("binded",false);
                }
            });

            $(".binding").on("click",function () {
                var $this = $(this);
                if($this.data("type") === 'weixin') {
                    console.log($this.data("binded"));
                    if($this.data("binded")) {
                        //如果微信未绑定则添加绑定，否则解除绑定
                        $.ajax({
                            type:"DELETE",
                            url:"http://www.pinzhi365.com/connect/weixin",
                            success:function (res) {
                                alert("微信解除绑定成功");
                            }
                        })
                    } else {
                        window.location.href = "";
                    }
                }
            });
        });
    </script>
</body>
</html>